<template>
  <div id="cesiumContainer">
    <div id="leftAndRightSlider" ref="lrSliderRef"></div>
  </div>
</template>

<script>

export default {
  name: 'ModelContrastLook',
  data() {
    return {}
  },
  mounted() {
    this.initCesium();
    this.renderRollerShutter()
  },
  methods: {
    initCesium: function () {
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: true,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false,//是否显示选取指示器组件
        shouldAnimate: false,     //自动播放动画控件
        shadows: true,//是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息

    },
    renderRollerShutter() {
      //加载模型
      //模型初始位置
      var origin = Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 200000.0);
      //东北坐标系的模型矩阵
      var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
      var model = this.viewer.scene.primitives.add(Cesium.Model.fromGltf({
        url: 'http://localhost:8888/model/SampleData/models/CesiumAir/Cesium_Air.glb',
        modelMatrix: modelMatrix
      }));

      model.readyPromise.then((model) => {
        //模型的动画
        model.activeAnimations.addAll({
          multiplier: 1.0,//模型的动画倍率
          loop: Cesium.ModelAnimationLoop.REPEAT//模型的动画循环方式
        });
        //控制的是相机的方向
        let hpRange = new Cesium.HeadingPitchRange();
        hpRange.heading = Cesium.Math.toRadians(90);//航向
        hpRange.pitch = Cesium.Math.toRadians(-40);
        hpRange.range = model.boundingSphere.radius * 2.5;
        var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
        this.viewer.camera.lookAt(center, hpRange);
      });

      //获取到所有的图元数据
      let primitives = this.viewer.scene.primitives;

      let left = primitives.get(0);
      left.splitDirection = Cesium.SplitDirection.LEFT;
      console.log(left)
      //获取到滑动的div
      var slider =  this.$refs.lrSliderRef

      //计算场景切分的位置，
      //splitPosition  模型数据，3dtiles数据，imageryLayer
      this.viewer.scene.splitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;

      var handler = new Cesium.ScreenSpaceEventHandler(slider);
      var moveActive = false;
      let _this = this
      //鼠标移动动态切分场景图元
      function move(movement) {
        if (!moveActive) {//移动状态控制
          return;
        }
        //鼠标移动的屏幕坐标，x
        var relativeOffset = movement.endPosition.x;
        //计算场景的切分位置
        var splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
        slider.style.left = 100.0 * splitPosition + '%';
        _this.viewer.scene.splitPosition = splitPosition;
      }

      //鼠标事件
      handler.setInputAction(function () {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      //触摸的逻辑
      handler.setInputAction(function () {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.PINCH_START);
      //鼠标移动执行move函数进行场景的动态切分
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
      //鼠标弹起或触摸结束移动激活状态结束
      handler.setInputAction(function () {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
      handler.setInputAction(function () {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.PINCH_END);
    }

  }

}
</script>
<style scoped>
#leftAndRightSlider {
  position: absolute;
  left: 50%;
  top: 0px;
  background-color: #d3d3d3;
  width: 5px;
  height: 100%;
  z-index: 99990000;
}

#leftAndRightSlider:hover {
  cursor: ew-resize;
}

</style>

